<!--
 * @Author: ChunLai
 * @Date: 2021-08-11 16:02:45
 * @LastEditTime: 2025-09-05 08:45:27
 * @Description: 个人税收居民身份声明文件
 * @FilePath: \02.bldinsure\src\views\form\components\RevenueFile.vue
-->
<template>
  <div class="shuoming-md">
    <div class="pop-Con">
      <h3 class="popup-mode-head">
        个人税收居民身份声明文件（{{ userLabel }}）
      </h3>
      <br />
      <div class="tbr mt20">
        <van-field
          :value="infoData.name"
          label="姓名"
          readonly
          maxlength="30"
          placeholder="英文或拼音"
        />
      </div>
      <p class="line3">本人声明:</p>
      <div>
        <van-radio-group v-model="form.crsIdType" @change="changeCrsIdType">
          <div
            class="pd5"
            v-for="(item, index) in crsIdTypeList"
            :key="item.keyId"
          >
            <van-radio
              :name="item.keyId"
              checked-color="#f58484"
              shape="square"
              icon-size="16px"
            >
              {{ `${index + 1}.${item.text}` }}
            </van-radio>
          </div>
        </van-radio-group>
      </div>
      <p class="p-tip">如在以上选项中勾选第2项或者第3项，请输入下列信息：</p>
      <div class="tbr" v-if="form.crsIdType !== '0'">
        <van-form ref="vanRef" validate-trigger="onSubmit">
          <van-field
            v-model="form.crsSurName"
            label="姓"
            maxlength="30"
            placeholder="英文或拼音"
            :formatter="formatter"
            :rules="[{ required: true, message: '请输入用户姓' }]"
          />
          <van-field
            v-model="form.crsName"
            label="名"
            maxlength="30"
            placeholder="英文或拼音"
            :formatter="formatter"
            :rules="[{ required: true, message: '请输入用户名' }]"
          />
          <van-field
            v-model="form.crsHomeNativePlace"
            label="现居国家"
            readonly
            @click="showPickAction('currentNativePlace')"
            placeholder="请选择现居国家"
            :rules="[{ required: true, message: '请选择现居国家' }]"
          >
            <span class="ms-row-icon" slot="right-icon"></span>
          </van-field>
          <van-field
            v-if="form.crsHomeNativePlace == '中国'"
            :value="form.crsHomeProvince + form.crsHomeCity"
            readonly
            label="省市"
            placeholder="请选择"
            @click-input="showCityPicker('crsHomeProvince')"
            :rules="[{ required: true, message: '请选择' }]"
          >
            <span class="ms-row-icon" slot="right-icon"></span>
          </van-field>
          <template v-else>
            <van-field
              v-model="form.crsHomeProvince"
              label="省/州"
              maxlength="30"
              placeholder="请输入"
              :rules="[{ required: true, message: '请输入' }]"
            />
            <van-field
              v-model="form.crsHomeCity"
              label="市"
              maxlength="30"
              placeholder="请输入"
              :rules="[{ required: true, message: '请输入' }]"
            />
          </template>
          <van-field
            v-model="form.crsHomeAddress"
            label="详细地址"
            maxlength="100"
            placeholder="请输入详细地址"
            :rules="[{ required: true, message: '请输入详细地址' }]"
          />
          <van-field
            v-model="form.crsBirthNativePlace"
            readonly
            @click-input="
              sameToNow ? () => {} : showPickAction('birthNativePlace')
            "
            label="出生国家"
            placeholder="请选择出生国家"
            :rules="[{ required: true, message: '请选择出生国家' }]"
          >
            <template #button>
              <van-button
                size="mini"
                :plain="!sameToNow"
                type="info"
                class="flx"
                @click.stop="sameToNow = !sameToNow"
              >
                同居住地</van-button
              >
            </template>
          </van-field>

          <van-field
            v-if="form.crsBirthNativePlace == '中国'"
            :value="form.crsBirthProvince + form.crsBirthCity"
            readonly
            label="省市"
            placeholder="请输入"
            @click-input="
              sameToNow ? () => {} : showCityPicker('crsBirthProvince')
            "
            :rules="[{ required: true, message: '请选择' }]"
          >
            <span class="ms-row-icon" slot="right-icon"></span>
          </van-field>
          <template v-else>
            <van-field
              v-model="form.crsBirthProvince"
              :readonly="sameToNow"
              maxlength="30"
              label="省/州"
              placeholder="请输入"
              :rules="[{ required: true, message: '请输入' }]"
            />
            <van-field
              v-model="form.crsBirthCity"
              :readonly="sameToNow"
              maxlength="30"
              label="市"
              placeholder="请输入"
              :rules="[{ required: true, message: '请输入' }]"
            />
          </template>

          <van-field
            v-model="form.crsBirthAddress"
            :readonly="sameToNow"
            maxlength="100"
            label="详细地址"
            placeholder="请输入详细地址"
            :rules="[{ required: true, message: '请输入详细地址' }]"
          />
          <div
            v-for="(item, index) in taxIdentDetail"
            :key="index"
            class="taxInfoBox"
          >
            <div v-if="index > 0" class="closBox">
              <van-icon
                name="clear"
                color="#DA251E"
                size="19"
                @click="closeTax(index)"
              />
            </div>
            <div style="flex: 1">
              <van-field
                v-model="item.crsTaxPlaceName"
                :label="'税收居民国' + (index > 0 ? index + 1 : '')"
                readonly
                @click="showPickAction('crsTaxPlace', index)"
                placeholder="请选择"
                :rules="[{ required: true, message: '选择税收居民国' }]"
              >
                <span class="ms-row-icon" slot="right-icon"></span>
              </van-field>
              <van-field
                v-model="item.crsTaxNo"
                label="纳税人识别号"
                :right-icon="rightIcon"
                @click-right-icon="dialogPop = true"
                maxlength="50"
                placeholder="请输入"
                :error-message="errorMesg"
                @blur="blurEvent(item, 'taxNo')"
                :rules="[
                  {
                    validator: (val) => validatorNo(item, val),
                    message: '纳税人识别号错误',
                  },
                ]"
              />
              <div class="no_tax_reasons" v-if="!item.crsTaxNo">
                <p class="p2-text">
                  如不能提供居民国（地区）纳税人识别号，请选择原因：
                </p>
                <van-radio-group
                  v-model="item.noTaxNoReason"
                  @change="changeNoTaxReason($event, index)"
                >
                  <van-radio
                    name="1"
                    checked-color="#f58484"
                    shape="square"
                    icon-size="14px"
                  >
                    居民国（地区）不发放纳税人识别号
                  </van-radio>
                  <van-radio
                    name="2"
                    checked-color="#f58484"
                    shape="square"
                    icon-size="14px"
                  >
                    账户持有人未能取得纳税人识别号，如选此项，请解释具体原因：
                  </van-radio>
                </van-radio-group>
                <van-field
                  type="textarea"
                  v-if="item.noTaxNoReason == '2'"
                  maxlength="100"
                  v-model="item.noTaxNoReasonDetail"
                  placeholder="请填写未取得纳税识别号的原因"
                  :rules="[
                    {
                      required: true,
                      message: '请输入未取得纳税识别号具体原因',
                    },
                  ]"
                />
              </div>
            </div>
          </div>
          <div
            v-if="taxIdentDetail.length < 3"
            class="addbtns"
            @click="addList"
          >
            +添加纳税居民国及纳税人识别号
          </div>
        </van-form>
      </div>
      <p class="tip-msg">
        本人确认上述信息的真实、准确和完整，且当这些信息发生变更时，将在30日内通知贵机构，否则本人承担由此造成的不利后果。
      </p>
      <br />
      <div class="btns">
        <van-button class="mui-btn1" block @click="handleBtn('2')"
          >取消</van-button
        >
        <van-button class="mui-btn1" block type="danger" @click="handleBtn('1')"
          >确认</van-button
        >
      </div>
      <div>
        说明：
        <br /><br />1.
        本表所称中国税收居民是指在中国境内有住所，或者无住所而在境内居住满一年的个人。在中国境内有住所是指因户籍、家庭、经济利益关系而在中国境内习惯性居住。在境内居住满一年，是指在一个纳税年度中在中国境内居住365日。临时离境的，不扣减日数。临时离境，是指在一个纳税年度中一次不超过30日或者多次累计不超过90日的离境。
        <br /><br />2.
        本表所称非居民是指中国税收居民以外的个人。其他国家（地区）税收居民身份认定规则及纳税人识别号相关信息请参见国家税务总局网（http://www.chinatax.gov.cn/aeoi_index.html）。
        <br /><br />3. 军人、武装警察无需填写此声明文件。
      </div>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        ref="picker"
        show-toolbar
        :columns="viewOptions"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        :default-index="0"
      >
        <div slot="title" class="keyBox" v-if="options.length > 8">
          <input
            type="text"
            class="keyInput"
            placeholder="请输入关键字查询"
            v-model="keyWord"
          />
        </div>
      </van-picker>
    </van-popup>
    <van-dialog v-model="dialogPop" title="提示">
      <div v-html="tipMsg" class="dialog-tip-box"></div>
    </van-dialog>
  </div>
</template>

<script>
import { revenueMinxin } from "@/mixins/revenue";
export default {
  name: "RevenueFile",
  props: {
    uType: {
      type: String,
      default: "tbr",
    },
    fileInfo: {
      type: Object,
    },
    infoData: {
      type: Object,
    },
  },
  data() {
    return {
      form: {
        crsIdType: "",
        crsIdTypeName: "",
        crsSurName: "",
        crsName: "",
        taxIdentDetail: [],
        crsHomeNativePlace: "",
        crsBirthNativePlace: "",
        crsBirthAddress: "",
        placeOfBirthEN: "",
        crsHomeAddress: "",
        homeAddressEN: "",
        birthNativePlace: "",
        currentNativePlace: "",
      },
    };
  },
  watch: {
    form: {
      handler(value) {
        if (this.sameToNow) {
          this.form.crsBirthNativePlace = this.form.crsHomeNativePlace;
          this.form.birthNativePlace = this.form.currentNativePlace;
          this.form.crsBirthProvince = this.form.crsHomeProvince;
          this.form.crsBirthProvinceName = this.form.crsHomeProvinceName;
          this.form.crsBirthCity = this.form.crsHomeCity;
          this.form.crsBirthCityName = this.form.crsHomeCityName;
          this.form.crsBirthAddress = this.form.crsHomeAddress;
          this.form.placeOfBirthEN = this.form.homeAddressEN;
        }
      },
      deep: true,
    },
    sameToNow(val) {
      if (!val) {
        this.form.crsBirthNativePlace = "";
        this.form.birthNativePlace = "";
        this.form.crsBirthProvince = "";
        this.form.crsBirthProvinceName = "";
        this.form.crsBirthCity = "";
        this.form.crsBirthCityName = "";
        this.form.crsBirthAddress = "";
        this.form.placeOfBirthEN = "";
      } else {
        this.form.crsBirthNativePlace = this.form.crsHomeNativePlace;
        this.form.birthNativePlace = this.form.currentNativePlace;
        this.form.crsBirthProvince = this.form.crsHomeProvince;
        this.form.crsBirthProvinceName = this.form.crsHomeProvinceName;
        this.form.crsBirthCity = this.form.crsHomeCity;
        this.form.crsBirthCityName = this.form.crsHomeCityName;
        this.form.crsBirthAddress = this.form.crsHomeAddress;
        this.form.placeOfBirthEN = this.form.homeAddressEN;
      }
    },
  },
  mixins: [revenueMinxin],
  created() {
    this.$store.dispatch("json/getAreaJson", "2").then((data) => {
      this.cityList = data;
    });
    if (this.crsTaxPlace && this.crsTaxPlace.length > 0) {
      this.nationList = this.crsTaxPlace; // 税收居民国
    } else {
      this.nationList = this.country; // 税收居民国
    }
    this.form = JSON.parse(JSON.stringify(this.fileInfo));
    if (this.form.taxIdentDetail) {
      this.taxIdentDetail = this.form.taxIdentDetail;
    }
  },
  methods: {
    //确认国家
    onConfirm(val) {
      if (this.target == "currentNativePlace") {
        this.form.currentNativePlace = val.keyId;
        this.form.crsHomeNativePlace = val.text;
      } else if (this.target == "birthNativePlace") {
        this.form.birthNativePlace = val.keyId;
        this.form.crsBirthNativePlace = val.text;
      } else if (this.target == "crsTaxPlace") {
        // 个税录入规则新增：1.声明状态选择‘2-仅为非居民’，税收居民国选择‘中国’时，阻断提示‘非居民税收居民国不可选择中国！’
        if (this.form.crsIdType.toString() === "1" && val.keyId === "CHN") {
          this.$msAlert(`非居民税收居民国不可选择中国。`);
          this.taxIdentDetail[this.targetIndex].crsTaxPlace = "";
          this.taxIdentDetail[this.targetIndex].crsTaxPlaceName = "";
          return false;
        }
        // 提示信息展示---新加
        if (val.tinHas && val.tinHas !== "") {
          this.rightIcon = "question-o";
          if (val.tinHas === "1") {
            this.tipMsg = `需填写${val.tinLengthTip}位字符；填写规则：${val.tinFormatTip}`;
          } else if (val.tinHas === "2") {
            this.tipMsg = `填写规则：${val.tinFormatTip}`;
          }
        } else {
          this.rightIcon = "";
        }
        this.errorMesg = "";
        this.crsTaxPlaceObj = val;
        this.taxIdentDetail[this.targetIndex].crsTaxPlace = val.keyId;
        this.taxIdentDetail[this.targetIndex].crsTaxPlaceName = val.text;
      } else if (this.target == "noTaxNoReason") {
        this.$set(
          this.taxIdentDetail[this.targetIndex],
          "noTaxNoReason",
          val.keyId
        );
        // console.log(this.taxIdentDetail[this.targetIndex], val.keyId);
      } else if (this.target == "crsHomeProvince") {
        this.form.crsHomeProvince = val[0];
        this.form.crsHomeCity = val[1];
      } else if (this.target == "crsBirthProvince") {
        this.form.crsBirthProvince = val[0];
        this.form.crsBirthCity = val[1];
      }
      this.showPicker = false;
    },
    handleBtn(type) {
      if (type === "2") {
        return this.$emit("handleFile", false);
      }
      // 纳税人识别号填写校验---待定
      // let taxNoPass = true
      // for(let j=0;j<this.taxIdentDetail.length;j++){
      //   const element = this.taxIdentDetail[j]
      // }
      // api接口字段赋值
      const findVal2 = this.crsIdTypeList.find(
        (ele) => ele.keyId === this.form.crsIdType
      );
      if (this.form.crsIdType == "0") {
        this.form = {
          crsSurName: "",
          crsName: "",
          crsIdType: "0",
          crsHomeAddress: "",
          homeAddressEN: "",
          crsBirthAddress: "",
          placeOfBirthEN: "",
          taxCountyAndNos: "",
          taxNum2: "",
          taxNum3: "",
          noTaxNoReason: "",
          noTaxNoReasonDetail: "",
          crsBirthCity: "",
          birthNativePlace: "",
          crsBirthNativePlace: "",
          crsBirthProvince: "",
          crsHomeCity: "",
          currentNativePlace: "",
          crsHomeNativePlace: "",
          crsHomeProvince: "",
          taxIdentDetail: [],
        };
        this.form.crsIdTypeName = findVal2.text;
        this.$emit("handleFile", this.form, this.uType);
      } else {
        /* 个税录入规则新增 */
        // 2.声明状态选择‘3-既是中国税收居民又是其他国家（地区）税收居民’时，仅录入了一行信息时，阻断提示‘既是中国税收居民又是非居民时至少需填写2个国家的纳税信息！’；
        // 且录入的税收居民国中不含‘中国’时，阻断提示‘既是中国税收居民又是非居民时需填写中国纳税信息！’
        if (this.form.crsIdType == "2") {
          if (this.form.taxIdentDetail.length <= 1) {
            this.$msAlert(
              `既是中国税收居民又是非居民时至少需填写2个国家的纳税信息。`
            );
            return false;
          } else {
            const findObj1 = this.form.taxIdentDetail.find(
              (ele) => ele.crsTaxPlace === "CHN"
            );
            // console.log(findObj1);
            if (!findObj1) {
              this.$msAlert(
                `既是中国税收居民又是非居民时,需填写中国纳税信息。`
              );
              return false;
            }
          }
        }
        // return false;
        this.$refs.vanRef.validate().then((valid) => {
          this.$emit("handleFile", this.form, this.uType);
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "./revenue.less";
</style>
